<template>
  <div class="parameter-editor">
    <div class="parameter-list">
      <div
        v-for="(value, key) in parameters"
        :key="key"
        class="parameter-item"
      >
        <el-input
          v-model="parameters[key].name"
          placeholder="参数名"
          class="param-name"
          @change="handleChange"
        />
        <el-select
          v-model="parameters[key].type"
          placeholder="类型"
          class="param-type"
          @change="handleChange"
        >
          <el-option label="文本" value="string" />
          <el-option label="数字" value="number" />
          <el-option label="布尔" value="boolean" />
          <el-option label="对象" value="object" />
          <el-option label="数组" value="array" />
        </el-select>
        <el-input
          v-if="parameters[key].type === 'string'"
          v-model="parameters[key].value"
          placeholder="值"
          class="param-value"
          @change="handleChange"
        />
        <el-input-number
          v-else-if="parameters[key].type === 'number'"
          v-model="parameters[key].value"
          placeholder="值"
          class="param-value"
          @change="handleChange"
        />
        <el-switch
          v-else-if="parameters[key].type === 'boolean'"
          v-model="parameters[key].value"
          class="param-value"
          @change="handleChange"
        />
        <el-input
          v-else
          v-model="parameters[key].value"
          type="textarea"
          :rows="3"
          placeholder="值 (JSON格式)"
          class="param-value"
          @change="handleChange"
        />
        <el-button
          type="danger"
          icon="Delete"
          circle
          @click="removeParameter(key)"
        />
      </div>
    </div>
    
    <div class="parameter-actions">
      <el-button type="primary" @click="addParameter">
        添加参数
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { Delete } from '@element-plus/icons-vue'

const props = defineProps({
  value: {
    type: Object,
    default: () => ({})
  }
})

const emit = defineEmits(['update'])

const parameters = ref({})

// 初始化参数
watch(() => props.value, (newValue) => {
  parameters.value = {}
  Object.entries(newValue).forEach(([key, value]) => {
    parameters.value[key] = {
      name: key,
      type: typeof value,
      value: value
    }
  })
}, { immediate: true })

// 添加参数
const addParameter = () => {
  const key = `param${Object.keys(parameters.value).length + 1}`
  parameters.value[key] = {
    name: '',
    type: 'string',
    value: ''
  }
}

// 删除参数
const removeParameter = (key) => {
  delete parameters.value[key]
  handleChange()
}

// 处理参数变更
const handleChange = () => {
  const result = {}
  Object.values(parameters.value).forEach(param => {
    if (param.name) {
      let value = param.value
      if (param.type === 'number') {
        value = Number(value)
      } else if (param.type === 'boolean') {
        value = Boolean(value)
      } else if (['object', 'array'].includes(param.type)) {
        try {
          value = JSON.parse(value)
        } catch (e) {
          console.warn('Invalid JSON:', value)
        }
      }
      // 确保参数名是字符串
      const paramName = String(param.name)
      result[paramName] = value
    }
  })
  emit('update', result)
}
</script>

<style lang="scss" scoped>
.parameter-editor {
  .parameter-list {
    .parameter-item {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      align-items: flex-start;
      
      .param-name {
        width: 150px;
      }
      
      .param-type {
        width: 100px;
      }
      
      .param-value {
        flex: 1;
      }
    }
  }
  
  .parameter-actions {
    margin-top: 16px;
  }
}
</style>